<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        ul li {
            padding: 5px 10px;
            background-color: pink;
            margin: 10px;
        }
    </style>
    <script src="../js/event.js"></script>
</head>
<body>
    <ul>
        <li><span>1</span></li>
        <li><span>2</span></li>
        <li><span>3</span></li>
        <li><span>4</span></li>
        <li><span>5</span></li>
        <li><span>6</span></li>
        <li><span>7</span></li>
        <li><span>8</span></li>
    </ul>
    <script>
    // 不使用事件委托
        // 每个li都绑定了事件, 每次重新生成都需要重新绑定事件
        var lis = document.querySelectorAll('ul li');
        lis.forEach(
            li => {
                li.onclick = ev => {
                    alert(ev.target.innerHTML);
                }
                // li.querySelector('span').onclick = ev => {
                //     alert(ev.target.parentNode.innerHTML);
                // };
            }
        );
        
        
    // 事件委托简化版
    /* var ul = document.querySelector('ul');
    ul.onclick = ev => {
        if(ev.target.tagName.toLowerCase() == 'li' || ev.target.tagName.toLowerCase() == 'span'){
            alert(ev.target.innerHTML);
        }
    } */
    // 较好的版本
    var ul = document.querySelector('ul');
    ev.delegate(ul, 'click', 'li', function(){
        alert(this.innerHTML);
    });
    function delegate(element, eventType, selector, fn){
        // 这种方法的好处是 哪怕点击的是selector的子级也会执行该函数
        element.addEventListener(eventType, function(ev){
            var el = ev.target;
            while(!el.matches(selector)){
                if(el === element) {
                    console.log('当前点击的为事件委托发起者');
                    el = null;
                    break; // 跳出while循环 往下执行
                }
                el = el.parentNode;
            }
            console.log(el);
            if(el){
                fn.call(el, ev, el)
            }
        })
    }



    </script>
</body>
</html>